import React, { useEffect, useMemo, useState } from 'react';
import TableList from './component/TableList';
import http from '../../utils/request';
import { Button, Modal } from 'antd';
import { useLoaderData } from 'react-router-dom';
import SearchForm from './component/SearchForm';
import FormBox from './component/FormBox';
import { useForm } from 'antd/es/form/Form';
function Home() {
    const [form] = useForm();
    // 用于列表，给的空数组
    const [list, setList] = useState([]);
    // 分页
    const [total, setTotal] = useState(0);
    const [pageSize, setPageSize] = useState(6);
    const [page, setPage] = useState(1);
    // 搜索
    const [job, setJob] = useState('');
    const [name, setName] = useState('');
    const [status, setStatus] = useState('');
    const [start_time, setstart_time] = useState('');
    const [end_time, setend_time] = useState('');
    // 新增编辑
    const [title, setTitle] = useState('');
    const [isModalOpen, setisModalOpen] = useState(false);
    // 按钮RBAC权限
    const AuthShow = useLoaderData();
    const addBtnShow = useMemo(() => {
        return AuthShow.includes('add');
    }, [AuthShow]);
    const editBtnShow = useMemo(() => {
        return AuthShow.includes('edit');
    }, [AuthShow]);
    const delBtnShow = useMemo(() => {
        return AuthShow.includes('delte');
    }, [AuthShow]);
    // 渲染列表  获取数据
    const getlist = async () => {
        const res = await http.get('/getSchemaList', {
            params: {
                pageSize: pageSize,
                page: page,
                name: name,
                job: job,
                status: status,
                end_time: end_time,
                start_time: start_time,
            },
        });
        console.log('表格', res);
        const { code, list, total } = res.data;
        if (code == 1) {
            setList(list);
            setTotal(total);
        }
    };
    // onChange监听分页变化
    const onChange = (page, pageSize) => {
        setPage(page);
        setPageSize(pageSize);
    };
    // 点击删除按钮执行的点击事件
    const delFn = async (record) => {
        const res = await http.delete('/delSchema', {
            params: { id: record.id },
        });
        console.log('删除', res);
        if (res.data.code == 1) {
            Modal.confirm({
                title: '删除警告',
                onOk() {
                    getlist();
                },
            });
        }
    };
    // 搜索
    const onSearch = (value) => {
        setJob(value.job);
        setName(value.name);
        setStatus(value.status);
        setstart_time(value.start_time);
        setend_time(value.end_time);
    };
    // 新增编辑
    const editFn = (record) => {
        setTitle('编辑');
        setisModalOpen(true);
        form.setFieldsValue(record);
    };
    const addFn = () => {
        setTitle('新增');
        setisModalOpen(true);
    };
    const onsubAnd = async (values) => {
        if (values.id) {
            const res = await http.put('/editSchema', values);
            console.log('编辑', res);
            if (res.data.code == 1) {
                getlist();
                handleCancel();
            }
        } else {
            const response = await http.post('/addSchema', values);
            console.log('新增', response);
            if (response.data.code == 1) {
                getlist();
                handleCancel();
            }
        }
    };
    const handleCancel = () => {
        setisModalOpen(false);
        form.resetFields();
    };
    // 在页面刷新时执行一次，
    useEffect(() => {
        getlist();
    }, [pageSize, page, job, name, status, start_time, end_time]);
    return (
        <div>
            <SearchForm onSearch={onSearch} />
            {/* 新增按钮 */}
            {addBtnShow && (
                <Button
                    onClick={() => {
                        addFn();
                    }}
                >
                    新增
                </Button>
            )}
            {/* 这是表格封装的组件 */}
            <TableList
                list={list}
                delBtnShow={delBtnShow}
                editBtnShow={editBtnShow}
                pageSize={pageSize}
                page={page}
                onChange={onChange}
                total={total}
                delFn={delFn}
                editFn={editFn}
            />
            {/* 新增编辑 */}
            <FormBox
                title={title}
                isModalOpen={isModalOpen}
                handleCancel={handleCancel}
                onsubAnd={onsubAnd}
                form={form}
            />
        </div>
    );
}

export default Home;
